<script>
  init({
    title: 'Reset View',
    desc: 'Reset the bootstrap table view, for example reset the table height: `$table.bootstrapTable(\'resetView\')`.',
    links: ['bootstrap-table.min.css'],
    scripts: ['bootstrap-table.min.js']
  })
</script>

<style>
  .div-table {width: 600px;}
</style>

<div id="toolbar">
  <button id="button" class="btn btn-secondary">Large and resetView</button>
  <button id="button2" class="btn btn-secondary">Small and resetView</button>
</div>
<div class="div-table">
  <table
    id="table"
    data-toggle="table"
    data-toolbar="#toolbar"
    data-height="460"
    data-url="json/data1.json">
    <thead>
      <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
      </tr>
    </thead>
  </table>
</div>

<script>
  var $div = $('.div-table')
  var $table = $('#table')
  var $button = $('#button')
  var $button2 = $('#button2')

  function mounted() {
    $button.click(function () {
      $div.width($div.width() + 50)
      $table.bootstrapTable('resetView')
    })
    $button2.click(function () {
      $div.width($div.width() - 50)
      $table.bootstrapTable('resetView')
    })
  }
</script>
